<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="menu_source/menu_jquery.js"></script>
<style type="text/css">
  body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
  h2 {font-weight:bold; color:#000099; margin: 20px 0px 10px 0; font-size: 1.5em;}
  p span {color:#006600; font-weight:bold; }
  a, a:link, a:visited {color:#0000FF;}
  textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
  textarea.html {height: 300px;}
  textarea.css {height: 50px;}
  p {margin: 0 0 10px 0; line-height: 1.5; font-size: 1em;}
  code, pre {font-family: Consolas,monospace; color: green;}
  ol li {margin: 0 0 15px 0;}

  .thirds {width: 30%; margin: 0 5% 0 0; float: left;}
  .thirds.last {margin-right: 0; float: left;}   
  .thirds textarea {height: 50px; font-size: .9em;}
</style>


</head>

<body>


<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  width: 250px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 3px;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
  margin: 0 0 2px 0;
}
#cssmenu > ul > li:last-child {
  margin: 0;
}
#cssmenu > ul > li > a {
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu > ul > li > a > span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}
#cssmenu > ul > li > a:hover {
  text-decoration: none;
}
#cssmenu > ul > li.active {
  border-bottom: none;
}
#cssmenu > ul > li.active > a {
  background: #bb117f;
  background: -moz-linear-gradient(#bb117f 0%, #960e66 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb117f), color-stop(100%, #960e66));
  background: -webkit-linear-gradient(#bb117f 0%, #960e66 100%);
  background: linear-gradient(#bb117f 0%, #960e66 100%);
  color: #fff;
  text-shadow: 0 1px 1px #000;
  border: 1px solid #960e66;
}
#cssmenu > ul > li.active > a span {
  border: 1px solid #bb117f;
}
#cssmenu > ul > li.has-sub > a span {
  background: url(menu_assets/images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
  background: url(menu_assets/images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
  padding: 5px 12px;
  display: none;
}
#cssmenu ul ul li {
  padding: 3px 0;
}
#cssmenu ul ul a {
  display: block;
  color: #595959;
  font-size: 13px;
  font-weight: bold;
}
#cssmenu ul ul a:hover {
  color: #79980d;
}
</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>

<h2>Installation Instructions</h2>
<p>These instructions will only work if you are installing your menu on a remote server or have a localhost server setup on your computer. For more help installing your menu, please visit the <a href="http://cssmenumaker.com/resources">Resources</a> section of our site. </p>
<ol>
   <li>Upload the <code>menu_source</code> folder to the root directory of your website. This is usually where your <code>index.html</code> or <code>index.php</code> file is.</li>
   <li>Copy and paste the code below somewhere between the <code>&lt;head>&lt;/head></code> tags.
	 	<textarea class='css'><link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='/menu_source/menu_jquery.js'></script></textarea>
	  
	 </li>
   <li>Copy and paste the HTML below where ever you want your menu to show up.<textarea class='html'><div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Widgets</span></a></li>
         <li><a href='#'><span>Menus</span></a></li>
         <li class='last'><a href='#'><span>Products</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Company</span></a>
      <ul>
         <li><a href='#'><span>About</span></a></li>
         <li class='last'><a href='#'><span>Location</span></a></li>
      </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div></textarea></li>
</ol>


<div class="thirds">
<h2>Share the Love</h2>
<p>If you are using our menus for free, then please consider giving us a link from your site. We have spent alot of time on these menus and would greatly appreciate a little credit.</p>
<textarea readonly="readonly"><a href="http://cssmenumaker.com" title="Drop Down Menus">Drop Down Menu by CSSMenuMaker.com</a></textarea>
</div>

<div class="thirds">
<h2>Menu Showcase</h2>
<p>Every month we publish a blog post and a newsletter showcasing some of the sites that use our menus. 
Our blog and newsletters are seen by thousands of people a day, so if your site is included in our showcase 
you can expect some serious traffic.</p>
<p>To submit your site visit the <a href="http://cssmenumaker.com/showcase">Menu Showcase</a> form.</p>
</div>

<div class="thirds last">
<h2>Troubleshooting</h2>
<p>Visit our <a href="http://cssmenumaker.com/resources">Resources</a> section more installation guides and troubleshooting materials.</p>
</div>

</body>
</html>